﻿﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<!--<meta http-equiv="content-type" content="text/html; charset=windows-1252">-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>阈值报警</title>
				<script src="../js/config.js"></script>
		<link rel="stylesheet" href="http://gis.hightop.me:8880/arcgis_js_api/library/3.14/3.14/dijit/themes/claro/claro.css" />
		<link rel="stylesheet" href="http://gis.hightop.me:8880/arcgis_js_api/library/3.14/3.14/esri/css/esri.css" />

		<!--<link rel="stylesheet" href="http://120.24.241.113:8080/arcgis_js_api/library/3.14/3.14/dijit/themes/claro/claro.css" />-->
		<!--<link rel="stylesheet" href="http://120.24.241.113:8080/arcgis_js_api/library/3.14/3.14/esri/css/esri.css" />-->
		<link href="../css/InfoWindow.css" rel="stylesheet" />
		<link href="../css/ThresholdAlarm.css" rel="stylesheet" />
		<link rel="stylesheet" href="../js/layui/css/layui.css" />
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/map.css" />
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_620219_te4bti4mccqy3nmi.css" />
		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<style>
			html,
			body {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}
			
			map {
				padding: 0;
			}
			
			.esriPopup .titlePane {
				background-color: #4791E0;
				line-height: 32px;
				border-radius: 0;
			}
			
			.esriPopup .titleButton.maximize {
				top: 9px;
			}
			
			.esriPopup .titleButton {
				top: 6px;
			}
			
			.esriPopup .actionsPane {
				border-radius: 0;
			}
			
			.panel-info>.panel-heading {
				color: #fff!important;
				background-color: #4791E0!important;
				border: none!important;
			}
			
			.panel-heading {
				border-radius: 0 !important;
			}
			
			.panel {
				border: none!important;
				border-radius: 0 !important;
			}
			
			#kzmb {
				right: 40px!important;
				top: 35px!important;
			}
			
			#alarmMessage {
				right: 40px!important;
			}
			
			.table-responsive {
				margin: 10px!important;
				border: 1px solid #dedede!important;
			}
		</style>
		
				<!-- 工具条 -->
		<script src="../js/commonTools.js"></script>
	</head>

	<body class="sn-body">
		<div id="map" style="height: 100%; width: 100%">
			<div id="infowin">
				<div id="close" onClick="closeInfoWin()">X</div>
				<div id="title"></div>
				<div id="content"></div>
				<div id="arrow"></div>
			</div>
		</div>

					<form class="layui-form" action="">
			<div id="timePickContainer" class="panel panel-primary">
				<div class="select-panel">
					<div style="width: 120px;float: left;">
						<input type="text" class="form-control" id="dataTimeSelect">
					</div>
					<div style="width: 100px;float: left;">
						<select class="form-control selectStyle" id="timeSelectOptions" lay-filter="timeSelectFilter">
							<!-- 四川区域模式 -->
							<option>2时</option>
							<option>8时</option>
							<option>14时</option>
							<option>20时</option>
							<!-- 欧洲中心 -->
							<option>8时</option>
							<option>20时</option>
						</select>
					</div>
					<div style="width: 120px;float: left;">
						<select class="form-control selectStyle" name="area" lay-filter="areaSelectFilter" id="areaSelectOptions">
							<option value="0" selected>遂宁市</option>
							<option value="1">船山区</option>
							<option value="2">安居区</option>
							<option value="3">蓬溪县</option>
							<option value="4">射洪县</option>
							<option value="5">大英县</option>
						</select>
					</div>
				</div>
			</div>
		</form>
			<!--工具等内容-->
			<div class="tools-box">
				<ul class="toolList">
					<li id="toolbar">
						<i class="iconfont icon-gongju"></i>
						<!--<b class="wrench"></b>-->
						<span>工具</span>
					</li>
					<li class="line">|</li>
					<li id="legendbar">
						<i class="iconfont icon-ditu"></i>
						<span>图例</span>
					</li>
				</ul>
			</div>

			<div class="operatebar commontool sn-tool">
				<div class="middlebox">
					<div class="editbtn" id="roadnetworktool">
						<i class="iconfont icon-vector"></i>
						<span>矢量</span>
					</div>
					<div class="editbtn" id="planettool">
						<i class="iconfont icon-weixing"></i>
						<span>影像</span>
					</div>
					<div class="editbtn" id="fullextenttool">
						<i class="iconfont icon-quantu"></i>
						<span>全图</span>
					</div>
					<div class="editbtn" id="distancetool">
						<i class="iconfont icon-celiang1"></i>
						<span>测距</span>
					</div>
					<div class="editbtn" id="areatool">
						<i class="iconfont icon-mianji"></i>
						<span>面积</span>
					</div>
					<div class="editbtn" id="rectangletool">
						<i class="iconfont icon-box-select"></i>
						<span>框选</span>
					</div>
					<div class="editbtn" id="polygontool">
						<i class="iconfont icon-xuanze"></i>
						<span>自由选择</span>
					</div>
					<div class="editbtn" id="weatherplot">
						<i class="iconfont icon-icon-mian"></i>
						<span>气象标绘</span>
					</div>
					<div class="editbtn" id="cleartool" style="border: none;">
						<i class="iconfont icon-clean"></i>
						<span>清除</span>
					</div>
				</div>
			</div>
			<!--控制面板的按钮-->
			<!--<div id="tuli" style="visibility:hidden;">
				<label id="tuliLabel" style="background-color: white;position: absolute;bottom: 10%;z-index: 1111111;left: 5%;" for="name">温度（℃）</label>
				<img src="../img/tuli.png" class="img-responsive center-block" style="position: absolute;bottom: 5%;z-index: 1111111;left: 5%;" />
			</div>-->

			<!-- 图例 -->
			<div id="segmentedColorContainer" style="right: auto;left: 20px;">
				<div id="segmentedColorTitle">
					<span>降水量(kg/m²)</span>
					<span id="dateInfo">2018-3-26 14时</span>
				</div>
				<div id="segmentedColor"></div>
				<div id="segmentedColorValue"></div>
			</div>

	<!--控制面板的按钮-->
		<div class="conceal rt">
			&lt;&lt;<span>控制面板</span>
		</div>


			<div id="kzmb" class="panel panel-default" style="width: 300px; height: 400px;
    margin-right: 10px;position: absolute;
    bottom: 32%;z-index: 10000;">
				<div class="panel panel-primary">
					<div class="panel-heading">
				<p class="topTip lf">控制面板</p>
				<div class="openTrol rt">
					<span>隐藏</span>&gt;&gt;
				</div>
				</h3>
			</div>
					<!--	overflow-y: scroll;-->
					<div class="panel-body" style="width: 300px;height: 350px;padding: 15px 0;">
						<div style="padding: 0 15px;">
							<div class="config-tiltle"><span>要素选择:</span></div>
							<div class="sn-aui-label">
								<ul>
									<li><input type="radio" name="optionsRadios" value="温度" id="temElement" onclick="init()" checked>
										<label for="temElement">温度</label>
									</li>
									<li><input type="radio" name="optionsRadios" value="降水" id="water" onclick="init()">
										<label for="water">降水</label>
									</li>
									<li><input type="radio" name="optionsRadios" value="风速风向" id="windSpeedDirec" onclick="init()">
										<label for="windSpeedDirec">风速风向</label>
									</li>
									<li>
										<input type="radio" name="optionsRadios" value="能见度" id="conspicurity" onclick="init()">
										<label for="conspicurity">能见度</label>
									</li>
									<li><input type="radio" name="optionsRadios" value="湿度" id="humidity" onclick="init()">
										<label for="humidity">湿度</label>
									</li>
									<li><input type="radio" name="optionsRadios" value="气压" id="pressure" onclick="init()">
										<label for="pressure">气压</label>
									</li>
								</ul>

							</div>
							<div>
								<div class="config-tiltle"><span>图层管理:</span></div>
								<div class="sn-aui-label">
									<ul>
										<li>
											<input type="checkbox" name="optionsRadiosinline" id="szbz" onclick="addThresholdAlarm()" checked>
											<label for="szbz">数值标注</label>
										</li>
										<li>
											<input type="checkbox" name="optionsRadiosinline" id="sb" onclick="temperatureContourMap(0.8)">
											<label for="sb">色斑图</label>
										</li>
									</ul>
								</div>
							</div>

						</div>
						<div>
							<table class="layui-table smallTable">
								<thead>
									<tr>
										<th>站点</th>
										<th>站名</th>
										<th id="changeName">温度</th>
									</tr>
								</thead>
								<tbody id="tableContent">
								</tbody>
							</table>
						</div>
					</div>
					<div style="height:30px; background-color: #E0E0E0;margin-top: 20px;">
						<button type="button" onclick="pre()" class="btn btn-link" style="margin-left: 50px;">上一页</button>
						<button type="button" onclick="next()" class="btn btn-link" style="margin-left: 50px;">下一页</button>
					</div>
					<div style="height:34px;text-align: center;color:#5B9CE3;font-size: 14px;">
						<!--<span class="caret" style="margin-left: 30%;"></span>-->
						<i class="iconfont icon-more-down"></i>
						<button type="button" onclick="showMoreInformation()" class="btn btn-link">更多</button>
					</div>
				</div>

			</div>

			<div id="publish" class="panel panel-default" style="visibility:hidden;width: 780px; height: 325px; margin-right: 10px;position: absolute;left: 20%; bottom: 35%;z-index: 10000;">
				<div class="panel panel-primary">
					<div class="panel-heading aui-layui-title">
						<h3 class="panel-title">编辑发布</h3>
						<i class="iconfont icon-close1" onclick="closePublish()" ></i>
						<!--<button type="button" class="close" onclick="closePublish()" aria-hidden="true" style="height: 30px;width: 30px; position: absolute; margin-top: -25px;margin-left: 92%">&times;</button>-->
					</div>
					<div class="panel-body sn-form">

						<div class="form-group">
							<div class="layui-input-inline">
								<span>发布时间： </span>
								<div class="layui-input-inline"><input type="text" id="publishDate" class="layui-input"/></div>
							</div>
							<div class="layui-input-inline">
								<span>发布单位：</span><div class="layui-input-inline"><input type="text" id="publishUnit" class="layui-input"/></div>
							</div>
						</div>


						<div class="form-group config-container">
							<!--<label for="name">发布方式:</label>-->
							<div class="config-tiltle"><span>发布方式：</span></div>
							<div class="checkbox">
								<div class="sn-aui-label">
									<ul>
										<li><input type="checkbox" value="shortmessage" id="shortmessage" checked="true"><label for="shortmessage">短信</label></li>
										<li><input type="checkbox" value="systemSpeech" checked="true"><label for="systemSpeech">系统语音</label></li>
									</ul>
								</div>
							</div>
						</div>
						
						<div class="form-group config-container layui-form">
							<div class="config-tiltle"><span>发布范围：</span></div>
							<!--<label for="name">发布范围：</label>-->
							
							<select id="publushArea" class="selectpicker">
							</select>
							
						</div>
						<div class="form-group config-container">
							<div class="config-tiltle"><span>发布内容：</span></div>
						<!--<label for="name">发布内容:</label>-->
						<div class="form-group layui-form">
						<div class="layui-input-inline">
							<span>站点：</span>
							<div class="layui-input-inline">
								<select id="stationId1" class="selectpicker" onchange="selectOnchang(this)"></select>
							</div>
							<span>站名：</span>
							<div class="layui-input-inline">
								<select id="stationName1" class="selectpicker" onchange="selectOnchang(this)"></select>
							</div>
							<span>资料时间： </span><span id="datatime"></span>
						</div>
						</div>
						<div class="form-group layui-form">
							<label for="name">报警内容</label>
							<textarea class="form-control" id="contents" rows="3"></textarea>
						</div>
						<div>
							<button type="button" class="btn btn-primary" style="float:right" onclick="closePublish()">确认发布</button>
						</div>
					</div>
				</div>
			</div>
			</div>
			<!--右下角警报信息-->
			<div id="alarmMessage" class="panel panel-default" style="visibility:hidden;width: 280px; height: 190px; margin-right: 10px;position: absolute; bottom: 1%;z-index: 10000;">

				<div class="panel panel-primary">
					<div class="panel-heading aui-layui-title" style="padding: 0 10px;">
						<span id="messageHeaderContent"></span>
						<i id="closemessageId" class="iconfont icon-close1" onclick="closemessage()"></i>
						<!--<img  src="../img/关闭.png" alt="关闭" style=" height: 30px;width: 30px;position: absolute;margin-top: -5px;margin-left: 55%;" onclick="closemessage()" />-->
					</div>
					<div class="panel-body">
						<div>
							<span>时间：</span><span id="datatimes"></span>
						</div>
						<div>
							<span>站点：</span><span id="stationId"></span> <span>站名：</span><span id="stationName"></span>
						</div>
						<div>
							<span>报警内容：</span><span id="alarmContent"></span>
						</div>
						<div class="xn-footer-btn">
							<button type="button" class="layui-btn  layui-btn-normal layui-btn-sm" onclick="editPublish()"><i class="layui-icon">&#xe642;</i> 编辑发布</button>
							<button type="button" class="layui-btn  layui-btn-primary layui-btn-sm" onclick="confirmSending()"><i class="layui-icon">&#xe605;</i>确认</button>
						</div>
					</div>

				</div>

			</div>

			<!--更多信息-->
			<div id="moreInformation" class="panel panel-default" style="visibility:hidden;width: 880px; height: 480px; margin-right: 10px;position: absolute;left: 25%; top: 15%;z-index: 10000;">
				<div class="panel-heading aui-layui-title" style="background-color:#5B9CE3;">
					<h3 class="panel-title">更多信息</h3>
					<i class="iconfont icon-close1" onclick="closeMoreInformation()" ></i>
					<!--<button type="button" class="close" onclick="closeMoreInformation()" aria-hidden="true" style="height: 30px;width: 30px; position: absolute; margin-top: -25px;margin-left: 92%">&times;</button>-->
				</div>
				<div class="panel panel-primary" style="overflow-y: scroll;width: 880px;height: 425px;">

					<form class="form-inline layui-form sn-form" role="form" style="padding-top: 10px;padding-left: 20px;">
						<div class="layui-input-item">
							<div class="layui-input-inline">
								<div class="layui-inline">
									<span>时间段：</span>
									<div class="layui-input-inline">
										<input type="text" name="start_time" class="layui-input" id="start_time" placeholder="开始时间(修改时间)">
									</div>
								</div>
								<span>~</span>
								<div class="layui-inline">
									<div class="layui-input-inline">
										<input type="text" name="end_time" class="layui-input" id="end_time" placeholder="结束时间(修改时间)">
									</div>
								</div>
							</div>
							<div class="layui-inline layui-input-inline">
								<span>地区:</span>
	   							 <div class="layui-input-inline small-line">
								<select class="selectpicker" lay-verify="">
									<option value="11">遂宁市</option>
								</select>
							</div>
							<div class="layui-input-inline">
								<span>站名:</span>
	   							 <div class="layui-input-inline small-line">
									<select id="diquSelect" class="selectpicker">
		
									</select>
								</div>
							</div>
							<div class="form-group">
								<button type="button" style="margin-left: 5px;" class="btn btn-primary" onclick="searchMoreInformation()">查询</button>
							</div>
						</div>
						</div>

						
					</form>
					<form role="form">
						<div class="form-group" style="padding-left: 10px;margin-top: 10px;">

							<div class="config-tiltle"><span>详细列表:</span></div>
							<div class="sn-aui-label">

								
								<ul>
									<li>
										<input type="checkbox" id="inlineCheckbox011" value="011" checked="true"> 
										<label class="checkbox-inline" for="inlineCheckbox011">国家基准气候站</label>
									</li>
									<li>
										<input type="checkbox" id="inlineCheckbox012" value="012"> 
										<label class="checkbox-inline" for="inlineCheckbox012">基本气象站</label>
									</li>
									<li>
										<input type="checkbox" id="inlineCheckbox013" value="013"> 
										<label class="checkbox-inline" for="inlineCheckbox013">一般气象站</label>
									</li>
								</ul>
								
								
							</div>
						</div>
					</form>
					<div class="table-responsive">
						<table class="table table-bordered layui-table smallTable" style="margin: 0;">
							<thead>
								<tr>
									<th>站点</th>
									<th>时间</th>
									<th>站名</th>
									<th>地区</th>
									<th>降水</th>
									<th>温度</th>
									<th>湿度</th>
									<th>气压</th>
									<th>风向</th>
									<th>风速</th>
								</tr>
							</thead>
							<tbody id="moretableContent"> </tbody>
						</table>
					</div>
				</div>
			</div>

			<script src="../js/jquery-2.1.3.min.js"></script>
			<script src="../js/layer/layer.js"></script>
			<script src="../js/layui/layui.js"></script>
			
			<script src="../js/ol.js" type="text/javascript"></script>
			<script src="../js/turf.min.js" type="text/javascript"></script>
			<!--<script src="http://120.24.241.113:8080/arcgis_js_api/library/3.14/3.14/init.js"></script>-->
			<script src="http://gis.hightop.me:8880/arcgis_js_api/library/3.14/3.14/init.js"></script>
			<script src="../js/kriging.js" type="text/javascript"></script>
			<script>
					//显示隐藏工具栏
				  $('#toolbar').on('click', function() {
				    if (!$(this).hasClass('active')) {
				      $(this).addClass('active');
				      $('.operatebar').show();
				    } else {
				      $(this).removeClass('active');
				      $('.operatebar').hide();
				    }
				  });
				  //显示隐藏图例
				  $('#legendbar').on('click', function() {
				    if (!$(this).hasClass('active')) {
				      $(this).addClass('active');
				      $('#segmentedColorContainer').show();
				    } else {
				      $(this).removeClass('active');
				      $('#segmentedColorContainer').hide();
				    }
				  });
			</script>
			<script src="../js/WKTUtil.js" type="text/javascript"></script>
			<script src="../js/mapTran.js" type="text/javascript"></script>         
			<script src="../js/map.js"></script>
			<script src="../data/rain.js"></script>
			<script src="../data/lonlat.js"></script>
			<script src="../data/temperature.js"></script>
			<script src="../js/InfoWindow.js"></script>
			<script src="../js/stationInformation.js"></script>
			<script src="../js/kriging.js"></script>
			<!--     <script src="../js/suining.js"></script>-->
			<script src="../js/temperature.js"></script>
			<script src="../js/TDTRoadLayer.js" type="text/javascript" charset="utf-8"></script>
			<script>
				var laydate;
				layui.use(['laydate','form'], function(){
  					laydate = layui.laydate;
  					//执行一个laydate实例
					laydate.render({
						elem: '#publishDate' //指定元素
							,
						type: 'datetime',
						value: new Date()
					});
	
					laydate.render({
						elem: '#start_time' //指定元素
							,
						type: 'datetime',
						value: new Date()
					});
	
					laydate.render({
						elem: '#end_time' //指定元素
							,
						type: 'datetime',
						value: new Date()
					});
				})
				
			
			</script>
	</body>

</html>